<template>
  <div class="info">
      <h1>网络信息</h1>
      <main>
            <div class="rate">
                <h3>网络接口速率</h3>
                <ul v-for="(item, index) in rate" :key="index">
                    <!-- <li>{{"属性值:" +v+'--'+ " 键值:" +k+'--'+ " 索引:" +i}}</li> -->
                    <li v-for="(value, key) in item" :key="key">
                      <p><span>网络接口: {{key}}</span></p>
                      <div class="mdui-progress">
                      <div
                              class="mdui-progress-determinate"
                              v-bind:style="{width: value.in / 102400 + '%'}"
                          ></div>
                      </div>
                    </li>
                </ul>
            </div>
      </main>
  </div>
</template>

<script>
export default {
  props: {
    rate: Array
  },
  computed: {
    getWidth () {
      const msg = this.logicalMsg / this.physicalMsg
      console.log(msg)
      return msg * 100
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  border: 1px solid #efefef;
  display: flex;
  flex-direction: column;
  align-items: center;
  h1{
      font-size: 25px;
      margin: 35px 0;
  }
  main{
      display: flex;
      flex-direction: column;
      width: 80%;
      ul {
          padding: 0;
          list-style: none;
          li {
              width: 100%;
          }
      }
  }
}
</style>
